import { useEffect } from "react";
import { Outlet, useLocation, useNavigation } from "react-router-dom";
import UserHeader from "../components/User/Header";
import UserFooter from "../components/User/Footer";
import { setTitle } from "../router";

// 创建一个组件来处理路由守卫逻辑
const RouteGuard = () => {
  const location = useLocation();
  const navigation = useNavigation();

  useEffect(() => {
    // 路由变化时自动执行的守卫逻辑
    const handleRouteChange = () => {
      // 1. 设置页面标题和meta信息
      setTitle(location.pathname);
      
      // 2. 可以在这里添加其他路由守卫逻辑
      // 例如：权限检查、页面访问统计等
      console.log('路由变化:', location.pathname);
    };

    // 页面加载完成后的处理
    const handlePageLoad = () => {
      // 滚动到顶部
      window.scrollTo(0, 0);
      
      // 其他页面加载后的处理逻辑
      console.log('页面加载完成:', location.pathname);
    };

    // 执行路由变化处理
    handleRouteChange();
    
    // 页面加载完成后执行
    if (navigation.state === 'idle') {
      // 使用 setTimeout 确保 DOM 已经更新
      setTimeout(handlePageLoad, 0);
    }
  }, [location.pathname, navigation.state]);

  return null; // 这个组件不渲染任何 UI
};

const UserLayout = () => {
  return (
    <div className="flex flex-col min-h-screen">
      <RouteGuard />
      <UserHeader />
      <main className="flex-grow">
        <Outlet />
      </main>
      <UserFooter />
    </div>
  );
};

export default UserLayout;